csydesfandomcom-20200215-history
Help:Advanced CSS and JS
---- Creating some custom code , or ? This page goes a little further than to give you some helpful details. Before you get started, though, you'll want to check out . If you're planning to write some JavaScript for your community, you'll need to ask for it to be turned on by contacting . Finally, you'll want to familiarise yourself with the . Page-specific customisation CSS The HTML element on articles includes a unique identifier based on the name of the page. For example, on this help page, the class is .page-Help_Advanced_CSS_and_JS The general format is .page-name, where spaces, colons, and other special characters are replaced by underscores. JavaScript In MediaWiki:Common.js, use a switch to apply JavaScript to certain pages: switch (mw.config.get('wgPageName')) { case 'page name': // JS here will be applied to "page name" break; case 'some other page': // JS here will be applied to "some other page" break; } Applying CSS and JavaScript to specific communities In your , you can add a class to the front of any other CSS selectors that will let you style the way your account looks at specific wikis. This class is based on the database name of a community, not the URL — which are usually, but not always, the same. The format is: ::.wiki-name or, if a non-English wiki: ::.wiki-[ ]name For instance, if you wanted to make part of the background of Wookieepedia appear red to you, add this to your global.css file: ::.wiki-starwars #WikiaMainContent { background-color:red; } For JavaScript, wgDBname can be used to identify a specific community. Load order The general load order for both CSS and JavaScript is: #Fandom's core code # # Within each level, the load order is Common first, then Wikia. This means that if you've said .class { color: red } in Common.css, but .class { color: green} in Wikia.css, the .class will be green. And because personal CSS is last, whatever you put there always overrides the local wiki's choices. It also critically means that if you're or — and your wiki has both Common.css and Wikia.css — those imports need to be at the very top of Common.css. If you want to simplify your wiki's CSS, you can graft the contents of Common.css onto Wikia.css. But you need to observe load order fundamentals when you do. Follow the nearby flowchart, and you'll be fine! For JavaScript, load order is especially important when considering how to best use . Because ImportJS loads last, you can put your customisation of a Dev Wiki script in Common.js or Wikia.js, but have the import of the script itself in ImportJS. The full JS load order is: #Common.js #Wikia.js #Imported scripts through Common.js #Imported scripts through Wikia.js #ImportJS Finally, remember the obvious: pages load from top to bottom. That means that declarations made at the top of a page can be overridden by ones at the bottom. !important in CSS Due to CSS load orders, you may sometimes need to make use of the !important property to ensure a CSS rule is applied. But !important should be avoided when possible by use of specific (even overly specific) CSS selectors. Caching issues Every file you download from the internet gets . Normally that's great because it reduces traffic both for your own device and for Fandom's servers, but it can be a problem when it comes to testing design changes. It may take a while before your changes to take effect unless you . If bypassing your cache doesn't work, you can try debugging your code by adding ?debug=1 at the end of the URL of any page. Debugging your code means that the code will almost 100% guarantee the load of the recently added script(s) and/or stylesheet(s). Popular JavaScript snippets To get an idea of some scripts others have written that you might find useful or would like to try, take a look at the list of JS Enhancements on the Fandom Developers Wiki. Duplicate JavaScript Many scripts can have problems if they are run multiple times on the same page. Make sure to write the code in such a fashion that a particular piece of code runs only once. Avoid pasting the same JavaScript in multiple files as it will likely conflict and cause confusing errors for you and other visitors. Temporarily disabling CSS/JavaScript Custom CSS and JavaScript can be temporarily disabling using the following commands. The command(s) should be added at the end of the URL (example: https://community.fandom.com/Special:Random?usesitecss=0. following example disables site CSS on Community Central). If more than one command is needed, instead of question mark (?), put an ampersand (&) for the second, third and fourth commands (in case if there are) (example: https://community.fandom.com/Special:Random?usesitecss=0&useuserjs=0. following example disables site CSS on Community Central and personal JavaScript). Here's a table of all the CSS/JavaScript commands. CSS and JavaScript editor error checking The CSS and JavaScript editors have active error checking ("linting") and : *As you type code, the page will let you know about any errors in the syntax that might have occurred. *Note that not every flagged issue has to be solved; CSS (and even JavaScript) technology is ever evolving, and browsers do not all behave identically: some messages may not require action. Common issues See also * - how to import CSS and JavaScript files * - using custom CSS and JavaScript on chat * - choose your own fonts * - the hub page for all CSS and JavaScript details * - an overview of the CSS and JavaScript pages that can be customised at Fandom Further help and feedback __NOSHAREDHELP__Category:Help